<template>
  <el-dialog class="updateOrgType" :title="title" :visible.sync="open" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="24" v-if="form.parentId !== 0">
          <el-form-item label="上级部门" prop="parentId">
            <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" disabled placeholder="选择上级部门" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="form.deptName" disabled placeholder="请输入部门名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-col :span="12">
            <el-form-item label="机构类型" prop="orgType">
              <el-select
                v-model="form.orgType"
                placeholder="请选择组织机构类型"
                style="width: 200px"
                clearable
                size="small"
              >
                <el-option
                  v-for="dict in orgTypeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <span class="msgTip">提示：修改机构类型后，所有下级部门都会被级联修改！请谨慎操作！</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="btnLoading" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { listDept, cascadeOrgType } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "updateOrgType",
    components: { Treeselect },
    data() {
      return {
        title: '',
        open: false,
        btnLoading: false,
        // 表单参数
        form: {},
        // 部门树选项
        deptOptions: [],
        orgTypeOptions: [{
          label:'机构',
          value:'org'
        },{
          label:'部门',
          value:'dept'
        }],
        // 表单校验
        rules: {
          parentId: [
            { required: true, message: "上级部门不能为空", trigger: "blur" }
          ],
          deptName: [
            { required: true, message: "部门名称不能为空", trigger: "blur" }
          ],
          orgType: [
            { required: true, message: "请选择机构类型", trigger: "change" }
          ]
        }
      }
    },
    methods: {
      init(item) {
        this.title = '更新机构类型';
        this.open = true;
        this.reset();
        this.getDeptOptions();

        this.form.deptId = item.form.deptId;
        this.form.parentId = item.form.parentId;
        this.form.deptName = item.form.deptName;
        this.form.deptFallName = item.form.deptFallName;
        this.form.orgType = item.form.orgType;
        this.form.orderNum = item.form.orderNum;
      },
      getDeptOptions() {
        listDept().then(response => {
          this.deptOptions = this.handleTree(response.data, "deptId");
        });
      },
      // 表单重置
      reset() {
        this.form = {
          deptId: undefined,
          parentId: undefined,
          deptName: undefined,
          deptFallName: undefined,
          orgType: undefined,
          orderNum: undefined
        };
        this.resetForm("form");
      },
      /** 转换部门数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.deptId,
          label: node.deptName,
          children: node.children
        };
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.btnLoading = true;
            cascadeOrgType(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.btnLoading = false;
              // this.$emit('getList');
            });
          }
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
    }
  }
</script>

<style>
  .updateOrgType .msgTip {
    color: red;
    font-size: 12px;
  }
  .updateOrgType .el-dialog__body {
    padding: 30px 20px 0;
  }
</style>
